<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head"><p>{{ $route.meta.title }}</p></div>

  <div class="ivu-card-body">
    <Table :columns="list.columns" :data="list.items" :loading="list.loading"></Table>
  </div>

  <div class="ivu-card-body"><Page :current="pager.current" :total="pager.totalItems" :page-size="pager.limit" show-total @on-change="onChangePage"></Page></div>
</div>
</template>

<script>
import Vue from 'vue';
import { Table, Page, Message, Modal } from 'iview';
import ajaxiView from '@/utils/ajaxiView';
import config from '@/config';
import apiConfig from '@/utils/apiConfig';
import auth from '@/utils/auth';
import TableOrderProducts from './tableOrderProducts.vue';
import Consignment from './consignment.vue';

export default {
  components: {
    [Table.name]: Table,
    [Page.name]: Page
  },
  data() {
    return {
      token: auth.getToken(),
      config,
      apiConfig: {},
      list: {
        columns: [
          {type: 'expand', width: 50, align: 'center', render: (h, params) => { return h(TableOrderProducts, {props: {items: params.row.user_order_products}}); }},
          {title: '订单ID', key: 'user_order_id', align: 'center'},
          {title: '用户名', key: 'account', align: 'center', render: (h, params) => { return h('span', params.row.user.account); }},
          {title: '凭证图片', key: 'voucher_picture', align: 'center', render: (h, params) => {
            if(params.row.voucher_picture.toString() !== '') {
              return h('a', {attrs:{href:this.config.uploadUrl+params.row.voucher_picture,target:'_blank'}}, [h('img',{attrs:{src:this.config.uploadUrl+params.row.voucher_picture,alt:'voucher_picture',width:80}})]);
            }
            return h('span', '无');
          }},
          {title: '快递公司', key: 'company', align: 'center'},
          {title: '快递单号', key: 'number', align: 'center'},
          {title: '状态', key: 'status', align: 'center', render: (h, params) => { return h('span', this.apiConfig['user_order_status'][params.row.status]); }},
          {title: '创建时间', key: 'create_time', align: 'center', render: (h, params) => { return h('span', new Date(parseInt(params.row.create_time) * 1000).toLocaleString()); }},
          {title: '操作', key: 'action', align: 'center', render: (h, params) => {
            var _this = this;
            var renders = [];
            switch(params.row.status) {
              case 5:
              case '5':
                renders.push(
                  h('a', {
                    class: 'ivu-btn ivu-btn-info ivu-btn-small',
                    on: {
                        click() {
                          Modal.confirm({render:(h)=>{ return h(Consignment, { props: { currentRow: params.row } }) }})
                        }
                      }
                  }, '发货')
                );
                break;
              case 1:
              case '1':
                break;
              case 21:
              case '21':
                break;
              default:
                break;
            }
            return h('div', renders);
          }}
        ],
        items: [],
        loading: false
      },
      pager: {
        current: 1,
        limit: 10,
        totalItems: 0
      }
    };
  },
  methods: {
    onChangePage(current) {
      this.pager.current = current;
      this.getData();
    },
    getData() {
      let _this = this;

      ajaxiView.get('/backstage/user/order?token='+_this.token+'&page='+_this.pager.current).then(function(data) {
        if(data !== false && typeof(data.pager) != 'undefined') {
          _this.list.items = data.pager.items;
          _this.pager.current = data.pager.current;
          _this.pager.limit = data.pager.limit;
          _this.pager.totalItems = data.pager.total_items;
        }

        _this.list.loading = false;
      });
    },
    _initialize() {
      this.getData();
    }
  },
  mounted() {
    var _this = this;
    _this.list.loading = true;
    apiConfig.getItem().then(function(config) {
      _this.apiConfig = config;
      _this._initialize();
    });
  }
}
</script>

<style>
.ivu-table-cell .ivu-btn.ivu-btn-small {
  margin-right: 5px;
}
</style>